<template>
  <div>
    <el-row type="flex" :gutter="20" style="padding-left: 20px; margin-bottom: 8px">
      <el-col :span="4">
        <h2 style="margin-top: 23px; margin-left: 5px">查看工作提醒</h2>
      </el-col>
      <el-col :span="19">
      </el-col>
      <el-col :span="1">
        <div style="padding: 20px 20px 15px 0">
          <el-button class="el-blue-button" @click="goview('新增工作提醒')" style="float: right"><i class="el-icon-plus"></i>&nbsp;新增工作提醒</el-button>
        </div>
        <!--          <download-excel
                    class = "export-excel-wrapper"
                    :data = "json_data"
                    :fields = "json_fields"
                    name = "filename.xls"
                    style = "display: inline; margin:0 10px">
                    &lt;!&ndash; 上面可以自定义自己的样式，还可以引用其他组件button &ndash;&gt;
                    <el-button class="el-blue-button"><i class="el-icon-download"></i>&nbsp;导出Excel</el-button>
                  </download-excel>-->
      </el-col>
    </el-row>
    <el-row style="margin: 0 50px 0 50px">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="固定工作提醒" name="fixReminder">
          <el-row type="flex" justify="space-between">
            <el-col :span="20">
              <el-form :inline="true"  class="demo-form-inline" style="margin-top: 20px">
                <el-form-item label="查询年份：">
                  <div class="block">
                    <el-date-picker
                      v-model="fixYear"
                      align="right"
                      type="year"
                      placeholder="选择年">
                    </el-date-picker>
                  </div>
                </el-form-item>
                <el-button class="el-blue-button" @click="getFixReminders"><i class="el-icon-search"></i> &nbsp;查询</el-button>
              </el-form>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <!-- v-if="activeName === 'fixReminder'" 防抖动-->
            <el-table
              v-if="activeName === 'fixReminder'"
              :data="fixReminders.slice((fixRemPaginate.currentPage-1)*fixRemPaginate.pagesize,fixRemPaginate.currentPage*fixRemPaginate.pagesize)">
              <el-table-column type="index" label="序号" width="150" align="center">
                <template slot-scope="scope">
                  <div v-text="(fixRemPaginate.currentPage-1) * fixRemPaginate.pagesize + 1 + scope.$index"></div>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="计划月份"  align="center"></el-table-column>
              <el-table-column prop="editor" label="编制人" width="500" align="center"></el-table-column>
              <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                  <el-button class="el-blue-button" size="mini" @click="handleCheck(scope.$index, scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: center;margin-top: 20px;">
              <el-pagination
                v-if="!(fixRemPaginate.pagesize===12)"
                background
                layout="prev, pager, next"
                :total="fixRemPaginate.total"
                @current-change="current_change">
              </el-pagination>
            </div>
          </el-row>
        </el-tab-pane>
          <el-tab-pane label="临时工作提醒" name="tempReminder">
          <el-row type="flex" justify="space-between">
            <el-col :span="20">
              <el-form :inline="true"  class="demo-form-inline" style="margin-top: 20px">
                <el-form-item label="查询年份：">
                  <div class="block">
                    <el-date-picker
                      v-model="tempMonth"
                      align="right"
                      type="month"
                      placeholder="选择月">
                    </el-date-picker>
                  </div>
                </el-form-item>
                <el-button class="el-blue-button" @click="getTempReminders"><i class="el-icon-search"></i> &nbsp;查询</el-button>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <el-table
              v-if="activeName === 'tempReminder'"
              :data="tempReminders"
              style="width: 100%">
              <!--<el-table-column v-for="prop in tableData[1]" :key="prop" :prop="prop.key" :label="prop.value" width="150" align="center"></el-table-column>-->
              <el-table-column width="240" prop="date" label="日期" align="center"></el-table-column>
              <el-table-column prop="task_type" label="任务类型" align="center" ></el-table-column>
              <el-table-column prop="business" label="任务内容" width="700" align="center"></el-table-column>
              <el-table-column prop="who_to_notice" label="提醒对象" width="150" align="center"></el-table-column>
              <el-table-column prop="checked_MEM_NAMES" label="确认人" width="150" align="center"></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button class="el-blue-button" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script>
import request from '@/network/request'
export default {
  name: 'index',
  data () {
    return {
      activeName: 'fixReminder',
      fixYear: new Date(),
      tempMonth: new Date(),
      fixRemPaginate: {
        total: 0,
        pageSize: 6,
        currentPage: 1
      },
      tempRemPaginate: {
        total: 0,
        pageSize: 6,
        currentPage: 1
      },
      fixReminders: [],
      tempReminders: []
    }
  },
  created () {
    if (Number(document.documentElement.clientHeight) > 1000) {
      this.fixRemPaginate.pagesize = 12
    } else {
      this.fixRemPaginate.pagesize = 6
    }
    this.fixRemPaginate.pagesize = Math.round(Number(Number(document.documentElement.clientHeight) - 400) / 60)
    this.getFixReminders()
    this.getTempReminders()
  },
  inject: ['reload'],
  methods: {
    getFixReminders () {
      console.log(this.fixYear)
      request({
        method: 'post',
        url: '/bulletin/getplan',
        params: {
          year: this.fixYear.getFullYear().toString()
        }
      }).then(res => {
        console.log(res)
        this.fixReminders = res.data.data
        this.fixRemPaginate.total = this.fixReminders.length
      })
    },
    /**
     *没有问题了
     */
    getTempReminders () {
      console.log(this.tempMonth)
      request({
        method: 'post',
        url: '/bulletin/getplantemporary',
        params: {
          yyyy_mm: this.tempMonth.getFullYear().toString() + '-' + (this.tempMonth.getMonth() + 1).toString()
        }
      }).then(res => {
        console.log(res)
        this.tempReminders = res.data.data
        this.tempReminders.forEach(r => {
          this.$set(r, 'task_type', '临时工作提醒')
          r.date = this.formatDate(new Date(r.date), 'yyyy-MM-dd hh:mm:ss')
        })
      })
    },
    formatDate (date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      }
      for (const k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          const str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str))
        }
      }
      return fmt
    },
    padLeftZero (str) {
      return ('00' + str).substr(str.length)
    },
    handleDelete (row) {
      console.log(row)
      request({
        method: 'post',
        url: 'bulletin/deleteplantemporary',
        params: {
          subid: row.subid
        }
      }).then(res => {
        this.reload()
        this.activeName = 'tempReminder'
      })
    },
    goview (name) {
      this.$router.push({ name }).catch(err => {
        err && console.log('刷新') // 待优化
      })
    },
    // 查看工作提醒表
    handleCheck (index, row) {
      console.log('打印了啥' + index, row)
      this.goViewWithQuery('查看工作提醒', row.id)
    },
    goViewWithQuery (name, data) {
      this.$router.push({ name, query: { data: data } }).catch(err => {
        err && console.log('刷新') // 待优化
      })
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    current_change: function (currentPage) {
      this.fixRemPaginate.currentPage = currentPage
    }
  }
}
</script>

<style scoped>

</style>
